<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<ui:composition template="template.xhtml">
	<ui:define name="content">
		<h:form id="form01">
			<p:growl id="messages" />
			<p:panel header="Charge"
				rendered="#{mainMenuControler.hasUserRole('admin') || mainMenuControler.hasUserRole('charge')}"
				style="text-align:center">
				<p:messages id="message" />
				<p:dataTable id="chargeTable" widgetVar="charge_w"
					value="#{chargeControler.chargeList}" var="charge" rows="15"
					paginator="true" filteredValue="#{chargeControler.filteredCharge}"
					paginatorAlwaysVisible="true" paginatorPosition="bottom"
					first="#{chargeControler.chargeListFirst}"
					paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink}">
					<p:column style="width:10%"
						headerText="#{dictionaryControler.dictionary['ID']}">
						<h:outputText value="#{charge.key}" />
					</p:column>
					<p:column style="width:10%" filterBy="#{charge.patientName}"
						filterMatchMode="contains"
						headerText="#{dictionaryControler.dictionary['Patient']} #{dictionaryControler.dictionary['Name']}">
						<h:outputText value="#{charge.patientName}" />
					</p:column>
					<p:column style="width:10%" filterBy="#{charge.doctorName}"
						filterMatchMode="contains"
						headerText="#{dictionaryControler.dictionary['Doctor']} #{dictionaryControler.dictionary['Name']}">
						<h:outputText value="#{charge.doctorName}" />
					</p:column>
					<p:column style="width:10%"
						headerText="#{dictionaryControler.dictionary['Fee']}">
						<h:outputText value="#{charge.fee}" />
					</p:column>
					<p:column style="width:10%"
						headerText="#{dictionaryControler.dictionary['Date']}">
						<h:outputText value="#{charge.genDate}">
							<f:convertDateTime pattern="yyyy-MM-dd hh:mm" timeZone="GMT+8" />
						</h:outputText>
					</p:column>
					<p:column style="width:10%"
						headerText="#{dictionaryControler.dictionary['Status']}">
						<h:outputText value="#{dictionaryControler.dictionary[charge.statusName]}" />
					</p:column>
					<p:column style="width:10%"
						headerText="#{dictionaryControler.dictionary['Description']}">
						<h:outputText value="#{charge.description}" />
					</p:column>
					<p:column style="width:3%"
						headerText="#{dictionaryControler.dictionary['Pay']}">
						<p:commandButton id="editButton" rendered="#{charge.canPay}"
							update=":form04:detailDialog,:form01:message"
							action="#{chargeControler.startCharge}" icon="ui-icon-pencil">
							<f:setPropertyActionListener value="#{charge}"
								target="#{chargeControler.selectedCharge}" />
						</p:commandButton>
					</p:column>
				</p:dataTable>
			</p:panel>
			<h:outputText value="Access Denied, please contact the administrator"
				rendered="#{!(mainMenuControler.hasUserRole('admin') || mainMenuControler.hasUserRole('charge'))}"
				style="width:100%; height:50%; text-align:center; font-size:150% !important;position:absolute; margin-left:0; margin-right:0; margin-top:0;margin-bottom:0" />
		</h:form>
	</ui:define>

	<ui:define name="dialog">
		<h:form id="form04">
			<p:dialog id="detailDialog" widgetVar="detailDialog_w" modal="true"
				showEffect="fade" resizable="false" draggable="true"
				closable="false" visible="#{chargeControler.editMode}"
				header="#{dictionaryControler.dictionary['Pay']}">
				<p:panelGrid columns="2">
					<p:outputLabel
						value="#{dictionaryControler.dictionary['Total Fee']}" />
					<h:outputText value="#{chargeControler.selectedCharge.fee}" />
					<p:outputLabel
						value="#{dictionaryControler.dictionary['Receive']}" />
					<p:inputText
						value="#{chargeControler.received}" onkeyup="rc()"/>
					<h:outputText
						value="#{dictionaryControler.dictionary['Change']}"/>
					<h:outputText id="change" value="#{chargeControler.change}"/>
				</p:panelGrid>
				<p:remoteCommand name="rc" update="change" actionListener="#{chargeControler.calc}" />
				<br />
				<p:messages id="msg" />
				<div style="text-align: right">
					<p:commandButton value="#{dictionaryControler.dictionary['Save']}"
						ajax="true" actionListener="#{chargeControler.charge}"
						update="detailDialog,:form01:chargeTable,msg"
						oncomplete="PF('charge_w').clearFilters();"
						style="margin-right:5px" />
					<p:commandButton id="cancelBtn"
						value="#{dictionaryControler.dictionary['Cancel']}" ajax="true"
						actionListener="#{chargeControler.cancelCharge}"
						update="detailDialog" immediate="true" />
				</div>
			</p:dialog>
		</h:form>
	</ui:define>
</ui:composition>
</html>